<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="path"
      :indent="30"
      :columns="columns"
      :request-api="getTableList"
      :pagination="false"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" @click="openDrawer('新增')" :icon="CirclePlus">新增菜单 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18" v-if="scope.row.icon && scope.row.icon != '#'">
          <component :is="scope.row.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button>
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('新增', scope.row)"> 新增 </el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteRow(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <MenuDrawer ref="menuDrawerRef" @success="handleSuccess" />
  </div>
</template>

<script setup lang="tsx" name="systemMenu">
import { ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";

import ProTable from "@/components/ProTable/index.vue";
import { MenuApi } from "@/api/modules";

import MenuDrawer from "./components/menuDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { handleTree } from "@/utils";
const success = data => {};

const menuDrawerRef = ref<InstanceType<typeof MenuDrawer> | null>(null);
const proTable = ref();
const tableData = ref([]);
const menuData = ref([]);
const status = ref(1);
const getTypeList = () => {
  return Promise.resolve({
    code: 200,
    data: [
      {
        userLabel: "目录",
        userStatus: 1,
      },
      {
        userLabel: "菜单",
        userStatus: 2,
      },
      {
        userLabel: "按钮",
        userStatus: 3,
      },
    ],
  });
};

// 表格配置项
const columns: ColumnProps[] = [
  // { type: "index", label: "#", width: 150 },
  // { prop: "type", label: "类型", enum: getTypeList, fieldNames: { label: "userLabel", value: "userStatus" } },
  { prop: "menuName", label: "菜单名称", width: 240, align: "left", search: { el: "input" } },
  // { prop: "enName", label: "英文名称", align: "left" },
  { prop: "icon", label: "菜单图标" },
  { prop: "routeName", label: "路由name", align: "left", search: { el: "input" } },
  { prop: "orderNum", label: "排序编号" },
  { prop: "path", label: "菜单路径", width: 300 },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "perms", label: "权限代码", width: 180 },
  { prop: "operation", label: "操作", width: 250, fixed: "right" },
];
const getTableList = async (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  const res: any = await MenuApi.getMenuList(newParams);
  if (res.data) {
    tableData.value = handleTree(res.data, "menuId");
  }
  return Promise.resolve({ data: tableData.value });
};

const openDrawer = (title: string, row: Partial<Menu.MenuOptions> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? MenuApi.addMenu : title === "编辑" ? MenuApi.editMenu : undefined,
    getTableList: proTable.value?.getTableList,
  };

  menuDrawerRef.value?.acceptParams(params);
};
const changeStatus = row => {
  status.value = 0;
};
const handleSuccess = (form: any) => {};
const deleteRow = async row => {
  await useHandleData(MenuApi.deleteMenu, { id: row.menuId }, `删除【${row.menuName}】`);
  proTable.value.getTableList();
};
</script>
